<section class="tab-con tab-con-1">
    <#if isUnlocked == false>
		<div class="unlock-row">
			<div class="desc">
				Example shown below. Unlock to view more.
			</div>
			<div>
                <#if login == false>
					<button class="btn btn-info" onclick="toLogin()">Unlock Report</button>
                <#else>
					<button class="btn btn-info" onclick="checkUnlockPermission(3)">Unlock Report</button>
                </#if>
			</div>
		</div>
		<img class="demo-img" src="${request.contextPath}/static/img/demo_mobile_post.png">
		<div class="lock-mask">
			<div class="lock-row">
				<button class="btn btn-default" onclick="showExp()">Show Example</button>
                <#if login == false>
					<button class="btn btn-info" onclick="toLogin()">Unlock Report</button>
                <#else>
					<button class="btn btn-info" onclick="checkUnlockPermission(3)">Unlock Report</button>
                </#if>
			</div>
		</div>
    <#else>
		<div class="chart-item">
			<div class="title">Most Used Hashtags</div>
			<div class="chart-con" id="hashtagsChart" style="height: 229px;">
			</div>
		</div>
		<div class="chart-item">
			<div class="title">Posting Activity</div>
			<div class="chart-con">
				<ul>
					<li class="is-active" onclick="changePostActivity(this,0)">Active Hours</li>
					<li onclick="changePostActivity(this, 1)">Active Days</li>
				</ul>
				<div class="chart-result" id="hoursPostChart" style="height: 191px">
				</div>
				<div class="chart-result" id="daysPostChart" style="height: 191px;display: none;">
				</div>
			</div>
		</div>
		<div class="chart-item">
			<div class="title">
				<div class="tx-popover">
					Most Used Sounds
					<i class="iconfont iconbangzhu" onclick="showTitleTips(0)"></i>
				</div>
			</div>
			<div class="table-wrap" id="postSound"></div>
		</div>
		<div class="chart-item">
			<div class="title">
				<div class="tx-popover">
					Commercial Challenges
					<i class="iconfont iconbangzhu" onclick="showTitleTips(1)"></i>
				</div>
			</div>
			<div class="table-wrap" id="postCommercial">
			</div>
		</div>
		<div class="chart-item">
			<div class="title">
				<div class="tx-popover">
					Mentioned
					<i class="iconfont iconbangzhu" onclick="showTitleTips(2)"></i>
				</div>
				<div class="sub-title">
					<ul>
						<li class="is-active" onclick="changeMentionTab(this, 1)">All</li>
						<li>|</li>
						<li onclick="changeMentionTab(this, 2)">Brands</li>
					</ul>
				</div>
			</div>
			<div class="table-wrap" id="postMentioned">
			</div>
		</div>
    </#if>
</section>
<script>
    function showTitleTips(index) {
        let config = {
            showTop: false,
            class: 'modal',
            content: 'body',
            isShowConfirmBtn: true,
            confirmBtnText: 'I know',
            isShowCancelBtn: false
        }
        if (index === 0) {
            config.content = 'Comprehensive performance of this music compared with other recent posted videos from the TikToker.'
        } else if (index === 1) {
            config.content = 'Comprehensive performance of this challenge compared with other recent posted videos from the TikToker.'
        } else {
            config.content = 'Comprehensive performance of this mention compared with other recent posted videos from the TikToker.'
        }
        showModal(config)
    }

    let currMentionTab = 1

    function changeMentionTab(e, index) {
        if (currMentionTab === index) {
            return false
        }
        e.classList.add('is-active')
        if (index === 1) {
            e.nextElementSibling.nextElementSibling.classList.remove('is-active')
        } else {
            e.previousElementSibling.previousElementSibling.classList.remove('is-active')
        }
        currMentionTab = index
	    document.getElementById('postMentioned').showLoading()
        getMentioned(index, true)
    }

    function changePostActivity(e, index) {
        e.classList.add('is-active')
        if (index === 0) {
            e.nextElementSibling.classList.remove('is-active')
	        document.getElementById('daysPostChart').hide()
	        document.getElementById('hoursPostChart').show()
        } else {
            e.previousElementSibling.classList.remove('is-active')
	        document.getElementById('daysPostChart').show()
	        document.getElementById('hoursPostChart').hide()
        }
    }

    function getUsedSounds() {
        _axios.get('/v1/blogger/music/${blogger.uid?c}').then(res => {
            if (res.Code === 200) {
                let str = ''
                res.Data.map(item => {
                    str += '<div class="info-item">' +
                        '<img class="avatar" src="${request.contextPath}/static/img/Music.png">' +
                        '<div class="label"><div class="title">' + item.title + '</div><div class="sub-title">' + item.author + '</div></div>' +
                        '<div class="right">'
                    if (item.performance > 20) {
                        str += '<div class="success">Excellent</div>'
                    } else if (item.performance < -20) {
                        str += '<div class="error">Poor</div>'
                    } else {
                        str += '<div class="info">Average</div>'
                    }
                    str += '</div></div>'
                })
                document.getElementById('postSound').innerHTML = str
            }
        })
    }

    function getCommercical() {
        _axios.get('/v1/blogger/hashtag/${blogger.uid?c}').then(res => {
            if (res.Code === 200) {
                let e = document.getElementById('postCommercial')
                let str = ''
                if (res.Data.length > 0) {
                    res.Data.map(item => {
                        str += '<div class="info-item">' +
                            '<img class="avatar" src="${request.contextPath}/static/img/Hashtag1.png">' +
                            '<div class="label"><div class="title">' + item.hashtagName + '</div></div>' +
                            '<div class="right">'
                        if (item.performance > 20) {
                            str += '<div class="success">Excellent</div>'
                        } else if (item.performance < -20) {
                            str += '<div class="error">Poor</div>'
                        } else {
                            str += '<div class="info">Average</div>'
                        }
                        str += '</div></div>'
                    })
                    e.innerHTML = str
                } else {
                    e.innerHTML = str
                    showNoData(e, 200)
                }
            }
        })
    }

    function getMentioned(stats = 1, changeThis = false) {
        _axios.get('/v1/blogger/mention/${blogger.uid?c}/' + stats).then(res => {
            if (res.Code === 200) {
                let e = document.getElementById('postMentioned')
                let str = ''
                if (res.Data.length > 0) {
                    res.Data.map(item => {
                        str += '<div class="info-item">' +
                            '<div class="avatar"><img src="' + item.avatar + '">'
                        if (item.enterpriseVerifyReason && item.customVerify) {
                            str += '<i class="iconfont iconzhichi icon-auth"></i>'
                        }
                        str += '</div>' +
                            '<div class="label"><div class="title">' + item.nickname + '</div><div class="sub-title">' + item.uniqueId + '</div></div>' +
                            '<div class="right">'
                        if (item.performance > 20) {
                            str += '<div class="success">Excellent</div>'
                        } else if (item.performance < -20) {
                            str += '<div class="error">Poor</div>'
                        } else {
                            str += '<div class="info">Average</div>'
                        }
                        str += '</div></div>'
                    })
                    e.innerHTML = str
                } else {
                    e.innerHTML = str
                    showNoData(e, 200)
                }
            }
            if (!changeThis) {
                document.querySelector('.tab-con-1').hideLoading()
            } else {
                document.getElementById('postMentioned').hideLoading()
            }
        })
    }
</script>